| JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】 | 您所在的位置：网站首页 › Solved Cannot read Properties of Undefined in JavaScript › JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】 |
JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】
|
JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで「Cannot read property 'プロパティ名' of undefined」というエラーが出る原因と対処法について現役エンジニアが解説しています。undefinedとは中身が設定されていない変数にアクセスしようとした場合に発生するエラーです。if文などで判定し対処できます。 2019/1/13テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 監修してくれたメンター高田 悠JavaScriptを用いた実装などフロントエンド領域の開発が得意。Web上での3D表現に興味がありWebARの実装案件を複数経験。ワークライフバランスを重視してフリーランス生活を送っている。JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」というエラーが出る原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次「Cannot read property 'プロパティ名' of undefined」とはエラーが出た時の解消方法エラーを出さないようにする予防策JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
 田島悠介
今回は、JavaScriptに関する内容だね！  大石ゆかり
どういう内容でしょうか？ 田島悠介
JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」というエラーが出る原因と対処法について詳しく説明していくね！ 大石ゆかり
お願いします！ 「Cannot read property ‘プロパティ名’ of undefined」とは JavaScriptの開発をしていると、以下のようなエラーに遭遇することがあります。
このエラーは、JavaScript初心者にとって1つの大きな混乱ポイントです。 なぜなら、以下に挙げる2つの「罠」があるからです。 罠1：「TypeError」は、タイプミスではない！エラー文の前半を見るとTypeErrorとあります。 そのまま読むと「タイプエラー」となり、なにか入力ミスをしているのかな？と思われるかもしれません。 しかし、プログラミングの文脈においてTypeは「型」を表します。 型とは文字列型や数値型など、値の種類を表す概念で、TypeErrorというのは型に関係のあるエラーですよ、という意味になります。 Uncaught TypeErrorは、さまざまな種類のエラーの頭に書いてあることが多く、エラー文の本体はその後ろの部分です。 罠2：「’プロパティ名’ of undefined」は、「プロパティ名がundefined」なのではない！undefinedというのは「未定義」のことですが、このエラーにおいてundefinedなのは一体何なのでしょうか？ 直感的には’プロパティ名’の部分なのかな、と思うかもしれませんが、実は違います。 ここがこのエラーの最も複雑な部分なので、コードを追いながら見ていきましょう。
次のコードを見てください。 const fruits = { apple: { price: 100 } }変数fruitsにはオブジェクトが代入されており、そのプロパティ（中身）として、appleという情報が存在しています。 ※オブジェクトの構造について理解したいという方は、以下の記事も参考にしてください。 JavaScriptでオブジェクトにプロパティを追加する方法を現役エンジニアが解説【初心者向け】
ここで、以下のように書くとどうなるでしょうか。 console.log(fruits.orange);
fruitsオブジェクトにorangeというプロパティは定義されていないため、コンソールにはundefinedという値が表示されます。 （ここで登場したundefinedをよく覚えておいてください！）
さて、次に以下のコードを書いてみます。 console.log(fruits.orange.price);さきほど出力したfruits.orangeは、undefinedでしたね。 そのundefinedという値に対して、ここではpriceというプロパティにアクセスしようとしています。 この瞬間に出現するエラーが、Cannot read property ‘price’ of undefined （undefinedに対してpriceというプロパティは読み込めませんという意味）です！ このように、undefinedな値に対して何かプロパティにアクセスしようとした時に、そんなアクセスは不可能ですと教えてくれるのが、このエラーの本質的な意味です。 エラーが出た時の解消方法 Cannot read property〜と出たら、まずはエラー箇所がどこかを特定しましょう。
エラー表示の一番右側に、該当の行数が表示されています。 今回は7行目なので、画像上のコードの7行目を確認すると、確かにその箇所に fruits.orange.price とエラー原因になる記述がありますね。 エラー箇所さえ見つけてしまえば、このエラーはコードの不具合を教えてくれる親切な人のように接することができます。
例えば、先ほどの const fruits = { apple: { price: 100 } } console.log(fruits.orange.price); //Cannot read 'price' of undefinedは、undefinedに対するpriceということだから、fruits.orangeがundefinedなんだな！と知ることができます。
あとはエラーの対象がundefinedになることを避けるように、コードを修正すれば、このエラーは役目を果たして消えてくれます。 const fruits = { //プロパティ名をorangeに変更 orange: { price: 100 } } console.log(fruits.orange.price); //100と表示される
[PR] フロントエンドで副業する学習方法を動画で公開中 エラーを出さないようにする予防策上記で説明した通り、このエラーは修正すべき箇所を教えてくれるため、発生しないようにしようと考えすぎる必要はありません。 修正点がわかったら、そこを直せば解決だからです。 しかし、実装のスピードという面で見ると、できるだけエラーに引っかからず進みたいものです。 そのためには、自分の書いている変数にどんな値が入るかを常に想定しながらコードを組むことが重要です。 undefinedにならないように最初から配慮し、必要に応じて条件分岐を設けるなどの工夫で、このエラーとの遭遇頻度は徐々に減らすことができます。 とはいえ、プロでも時々起こしてしまうエラーです。 最初のうちは、出たエラーを解消する経験を積み重ねることで成長していきましょう！
今回は以上です。
大石ゆかり
内容が分かりやすくて良かったです！ 田島悠介
ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり
分かりました。ありがとうございます！ コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。 ・困ったときに、質問や相談できる相手がいるため挫折しなかった ・プロとして必要なスキルのみを深く学べたので無駄がなかった ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。 自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？ カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。 無理な勧誘は一切ない ので、お気軽にご参加ください。 今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら JavaScriptを学習中の方へこれで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！ 
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。 30分間、オンラインでどんなことでも質問し放題です。 「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。 「自分に合っているか診断してほしい」 「漠然としているが話を聞いてみたい」 こんなささいな悩みでも大丈夫です。 無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。 ※体験用のカリキュラムも無料で配布いたします。（1週間限定） 今なら参加者限定の割引特典付き！ 無料相談を予約する |
【本文地址】